<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>ChineseCheese</title>
</head>
<body>
<canvas id="paper" style="border:1px solid black;"></canvas>
<div id="cache" style="display:none;">
   <img id="cache_panel" src="panel.jpg" />
   <img id="cache_item_r_shuai" src="r_shuai.png" />
   <img id="cache_item_r_shi" src="r_shi.png" />
   <img id="cache_item_r_xiang" src="r_xiang.png" />
   <img id="cache_item_r_ma" src="r_ma.png" />
   <img id="cache_item_r_ju" src="r_ju.png" />
   <img id="cache_item_r_pao" src="r_pao.png" />
   <img id="cache_item_r_bing" src="r_bing.png" />
   <img id="cache_item_b_jiang" src="b_jiang.png" />
   <img id="cache_item_b_shi" src="b_shi.png" />
   <img id="cache_item_b_xiang" src="b_xiang.png" />
   <img id="cache_item_b_ma" src="b_ma.png" />
   <img id="cache_item_b_ju" src="b_ju.png" />
   <img id="cache_item_b_pao" src="b_pao.png" />
   <img id="cache_item_b_zu" src="b_zu.png" />
</div>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="paper.js"></script>
<script type="text/javascript">
function dom(id) {
  return document.getElementById(id);
}

function on(elem, event, func) {
  elem.addEventListener(event, func, false);
  return on;
}

var paper = dom('paper'), pen = paper.getContext('2d');
var ww = window.innerWidth*0.95, wh = window.innerHeight*0.95
    pw = ww<wh?ww:wh, cr = pw/20, ir = 50;
paper.setAttribute('width', ww);
paper.setAttribute('height', wh);
pen.save();
var cache = {
   panel: dom('cache_panel'),
   item: {
      r_shuai: dom('cache_item_r_shuai'),
      r_shi: dom('cache_item_r_shi'),
      r_xiang: dom('cache_item_r_xiang'),
      r_ma: dom('cache_item_r_ma'),
      r_ju: dom('cache_item_r_ju'),
      r_pao: dom('cache_item_r_pao'),
      r_bing: dom('cache_item_r_bing'),
      b_jiang: dom('cache_item_b_jiang'),
      b_shi: dom('cache_item_b_shi'),
      b_xiang: dom('cache_item_b_xiang'),
      b_ma: dom('cache_item_b_ma'),
      b_ju: dom('cache_item_b_ju'),
      b_pao: dom('cache_item_b_pao'),
      b_zu: dom('cache_item_b_zu')
   }
};

var base_objxy = [0, pw];
if (ww>wh) base_objxy = [pw, 0];

var view = new Box(0, 0, ww, wh);
view.objs = view.objs.concat([
   ['c', base_objxy[0] + 0, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_shuai'],
   ['c', base_objxy[0] + cr, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_shi'],
   ['c', base_objxy[0] + cr*2, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_xiang'],
   ['c', base_objxy[0] + cr*3, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_ma'],
   ['c', base_objxy[0] + cr*4, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_ju'],
   ['c', base_objxy[0] + cr*5, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_pao'],
   ['c', base_objxy[0] + cr*6, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_bing'],
   ['c', base_objxy[0] + cr*7, base_objxy[1] + 0, 1, cr*2, cr*2, 0, 'r_bing'],
   ['c', base_objxy[0] + 0, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_bing'],
   ['c', base_objxy[0] + cr, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_shi'],
   ['c', base_objxy[0] + cr*2, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_xiang'],
   ['c', base_objxy[0] + cr*3, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_ma'],
   ['c', base_objxy[0] + cr*4, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_ju'],
   ['c', base_objxy[0] + cr*5, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_pao'],
   ['c', base_objxy[0] + cr*6, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_bing'],
   ['c', base_objxy[0] + cr*7, base_objxy[1] + cr*2, 1, cr*2, cr*2, 0, 'r_bing'],
   ['c', base_objxy[0] + 0, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_jiang'],
   ['c', base_objxy[0] + cr, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_shi'],
   ['c', base_objxy[0] + cr*2, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_xiang'],
   ['c', base_objxy[0] + cr*3, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_ma'],
   ['c', base_objxy[0] + cr*4, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_ju'],
   ['c', base_objxy[0] + cr*5, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_pao'],
   ['c', base_objxy[0] + cr*6, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_zu'],
   ['c', base_objxy[0] + cr*7, base_objxy[1] + cr*4, 1, cr*2, cr*2, 0, 'b_zu'],
   ['c', base_objxy[0] + 0, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_zu'],
   ['c', base_objxy[0] + cr, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_shi'],
   ['c', base_objxy[0] + cr*2, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_xiang'],
   ['c', base_objxy[0] + cr*3, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_ma'],
   ['c', base_objxy[0] + cr*4, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_ju'],
   ['c', base_objxy[0] + cr*5, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_pao'],
   ['c', base_objxy[0] + cr*6, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_zu'],
   ['c', base_objxy[0] + cr*7, base_objxy[1] + cr*6, 1, cr*2, cr*2, 0, 'b_zu']
]);

view.draw_fn = draw;

function draw(obj) {
  if (!obj) return;
  pen.save();
  pen.beginPath();
  pen.arc(obj[1]+cr, obj[2]+cr, cr, 0, 2*Math.PI);
  pen.clip();
  pen.drawImage(cache.item[obj[7]], obj[1], obj[2], cr*2, cr*2);
  pen.restore();
}

function paint(time) {
  pen.restore(); pen.save();
  pen.clearRect(0, 0, paper.width, paper.height);

  pen.save();
  pen.translate(-view.viewport[0], -view.viewport[1]);
  pen.drawImage(cache.panel, 0, 0, pw, pw);
  pen.restore();

  view.paint(pen, 0, 0, false);
  if (obj_select) {
     pen.strokeStyle = 'black';
     pen.beginPath();
     pen.arc(
        view.objs[obj_select[0]][1]-view.viewport[0]+cr,
        view.objs[obj_select[0]][2]-view.viewport[1]+cr,
        cr, 0, 2*Math.PI);
     pen.stroke();
  }
}

var obj_moving = null;
var obj_select = null;
var win_moving = null;
on(paper, 'mousedown', function (e) {
  var mix = view.hit(e.offsetX+view.viewport[0], e.offsetY+view.viewport[1]);
  if (mix < 0) {
    win_moving = [e.offsetX, e.offsetY];
    obj_moving = null;
    obj_select = null;
  } else {
    win_moving = null;
    obj_moving = [mix, view.objs[mix][1]-e.offsetX, view.objs[mix][2]-e.offsetY];
    obj_select = [mix, view.objs[mix][7]];
  }
  window.requestAnimationFrame(paint);
})(paper, 'mousemove', function (e) {
//  if (!mouse_holding) return;
  if (!obj_moving) return;
  view.objs[obj_moving[0]][1] = e.offsetX+obj_moving[1];
  view.objs[obj_moving[0]][2] = e.offsetY+obj_moving[2];
  window.requestAnimationFrame(paint);
})(paper, 'mouseup', function (e) {
//  mouse_holding = false;
  if (win_moving) {
     var win_moved = [e.offsetX, e.offsetY];
     var win_delta = [win_moved[0]-win_moving[0], win_moved[1]-win_moving[1]];
     view.translate(-win_delta[0], -win_delta[1]);
     win_moving = null;
     window.requestAnimationFrame(paint);
     return;
  }
  if (!obj_moving) return;
  window.requestAnimationFrame(paint);
  act();
  obj_moving = null;
});

var timestamp = 0, next_timestamp = 0;

function act() {
   var payload = [];
   view.objs.forEach(function (x) {
      payload.push([
         x[0], x[1]/pw, x[2]/pw, x[3], 0, 0, x[6], x[7]
      ]);
   });
   ajax({
      url: '/api/set',
      method: 'POST',
      json: {objs: payload}
   });
   timestamp = next_timestamp;
}

function syncup() {
   ajax({
      url: '/api/get',
      method: 'POST'
   }, function(data) {
      if (data.objs.length && data.timestamp > timestamp) {
         timestamp = data.timestamp;
         view.objs = data.objs;
         view.objs.forEach(function (x) {
            x[1] = x[1]*pw;
            x[2] = x[2]*pw;
            x[4] = cr*2;
            x[5] = cr*2;
         });
         window.requestAnimationFrame(paint);
      }
      next_timestamp = data.now;
      setTimeout(syncup, 1000);
   });
}

</script>
<script type="text/javascript" src="petal-interactions.js"></script>
<script type="text/javascript">
var mob = new PetalMobileInteraction();
mob.bind(paper);

document.addEventListener('DOMContentLoaded', function () {
   syncup();
}, false);
</script>
</body>
</html>
